<template>
    <div class="body">
        <div class="logo">
            <div>
                <img src="@/assets/红细胞.png" class="logoImage">
            </div>
            <div class="logoText">红细胞工作室</div>
        </div>
        <div class="signDiv">
            <div class="welcomeSign">注册信息</div>
            <div class="horizontal-line"></div>
            <!-- 头像区域 -->
            <div class="avatar-container">
                <img v-if="previewUrl" :src="previewUrl" alt="头像" class="avatar" />
                <div v-else class="avatar-placeholder"></div>
                <!-- 编辑按钮 -->
                <label class="edit-button">
                    <input type="file" @change="handleFileUpload" accept="image/*" />
                    <svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M15.232 3.232a3 3 0 014.242 4.242l-10.01 10.01a1 1 0 01-.423.252l-4 1a1 1 0 01-1.212-1.212l1-4a1 1 0 01.252-.423l10.01-10.01zm-2.827 3.415L5.88 13.172l-.707 2.829 2.829-.707 6.526-6.526-2.121-2.121zm1.414-1.414L16.95 7.05 18.364 5.636a1 1 0 00-1.414-1.414l-1.414 1.414z" />
                    </svg>
                </label>
            </div>
            <div class="form-container">
                <div class="form-group">
                    <label>你的工号</label>
                    <input type="text" v-model="formData.username" placeholder="请输入你的工号" />
                </div>

                <div class="form-group">
                    <label>你的性别</label>
                    <select v-model="formData.sex">
                        <option value="F">F</option>
                        <option value="M">M</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" v-model="formData.password" placeholder="请输入你的密码" />
                </div>

                <div class="form-group">
                    <label>电话号码</label>
                    <input type="text" v-model="formData.phone" placeholder="请输入你的电话号码" />
                </div>

                <button class="submit-button" @click="isSign">注册</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import router from '@/router/index';
import { ref } from 'vue';
import { previewUrl,formData, handleFileUpload ,isSign} from "./sign";
</script>

<style scoped>
@import '../sign/sign.scss';
</style>